<template>
	<view class="chat-bac">
		<call-nav-bar isList='1' :active='index' @sendIndex='sendIndex'></call-nav-bar>
		<chat-message listType="1" :index='index' :key="componentKey"></chat-message>
	</view>
</template>

<script>
	import socket from '@/common/js/socket.js'
	// 订单组件，服务进度
	import userOrder from '@/components/common/user-chat/user-order.vue'
	import {
		debounce
	} from '@/common/js/common.js';
	import callNavBar from '@/components/common/user-chat/call-nav-bar.vue'
	import chatMessage from '@/components/common/user-chat/chat-message.vue'
	export default {
		components: {
			callNavBar,
			chatMessage,
		},
		data() {
			return {
				// 护士是1，用户是2
				index: 1,
				componentKey: 0,
				// 判断是用户还是客服发的消息,0是客服，1是用户,2是护士
				socketTask: null,
				// 默认关闭
				isClose: true,
				// 等待时间
				timer: 10000,
				userInfo: null,
				userInfo: null
			};
		},
		computed: {},
		onLoad(option) {},
		// 父页面
		onReachBottom() {
			uni.$emit('onReachBottom') // 设置监听事件
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo.mobile == '18888888888') this.index = 2
			if (this.userInfo.mobile == '16666666666') this.index = 1

			this.refreshComponent()
			this.connectSocket()
		},
		methods: {
			sendIndex(val) {
				// this.index = Number(val) + 1
				// console.log(this.index);
				// this.refreshComponent()
			},
			refreshComponent() {
				console.log('返回刷新了-------');
				// 改变 key 的值来刷新组件
				this.componentKey++;
			},
			connectSocket() {
				this.userInfo = uni.getStorageSync('userInfo')
				let map = {
					18888888888: '80/2',
					16666666666: '81/1'
				}
				let that = this
				that.socketTask = socket.connectSocket(map[this.userInfo.mobile])
				that.socketTask.onOpen(function(res) {
					console.log('websocket连接已打开！！！');
					that.heart()
				})
				let msg = null
				that.socketTask.onMessage(function(res) {
					msg = JSON.parse(res.data)
					console.log('收到服务器内容：', msg);
					if (msg) {
						console.log('刷新了-------');
						that.refreshComponent()
					}
				})
				that.socketTask.onError(function(res) {
					console.log('websocket连接打开失败，请检查---', res);
					// 进入重新连接
					that.reconnect()
				})
				that.socketTask.onClose((e) => {
					console.log('websocket连接关闭');
					clearInterval(that.timer)
					that.timer = ''
					if (!that.isClose) {
						that.reconnect()
					}
				})
			},
			// 进入重新连接
			reconnect() {
				console.log('进入断线重新连接');
				this.socketTask = null
				this.connectSocket()
			},
			heart() {
				let that = this
				clearInterval(this.timer)
				this.timer = ''
				let msg = {
					"type": "heartbeat"
				}
				this.timer = setInterval(() => {
					that.sendSocketMessage(JSON.stringify(msg)).then(res => {
						console.log('心跳成功');
					}).catch(res => {
						console.log('发送失败', res);
					})
				}, 222000000)
			},
		}
	};
</script>

<style scoped lang="less">
	.scroll-Y {
		height: 600rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 600rpx;
		line-height: 600rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 600rpx;
		line-height: 600rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.tl {
		font-size: 28rpx;
		color: #333333;
	}

	.tll {
		font-size: 28rpx;
		color: #666666;
	}

	.menu-l {
		width: 98%;
		height: 194rpx;
	}

	.icon-img {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.87);
	}

	.menu-ll {
		width: 98%;
		height: 670rpx;
	}

	.menu-t {
		font-size: 32rpx;
		color: #3E3E3E;
	}

	.menu-tl {
		border-bottom: 1rpx solid beige;
	}

	.menu-c {
		font-size: 24rpx;
		color: #438AFF;
	}

	.order-s {
		width: 98%;
		height: 220rpx;
	}

	.chat-bc {
		background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/338c33478a854a02.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.keyword-bc {
		height: 336rpx;
		background: #F6F6F6;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	}
</style>